﻿<script id="ChapterTemplate" type="text/html">
    <div data-bind="template: {name:viewmodel.selectedTagMode().value(), foreach: tagCollection, afterRender: onRenderTagCompleted}"></div>
    <img class="picture-small" data-bind="attr: {src: src}"></img>
</script>
<!-- This is the NORMAL template -->
<script id="TagTemplate" type="text/html">
    <div class="tag_label tag_label tag_label_inactive" data-bind="style:{marginTop: y,marginLeft:x,width:w,height:h}">
        <span class="translatedText">${content}</span>
    </div>
</script>
<!-- This is the HOVER template -->
<script id="TagTemplateHover" type="text/html">
    <div  id="tag-indicator" class="tag_label tag_label_inactive" data-bind="style:{marginTop: y,marginLeft:x,w:w,h:h}">
    </div>
    <div id="contentDiv" class="tag_label tag_label_inactive" data-bind="style:{display: 'none',marginTop: y,marginLeft:x2,w:w,h:h,}">
        <span class="translatedText">${content}</span>
    </div>
</script>
<!-- This is NO TAG template-->
<script id="TagTemplateDisable" type="text/html">
    <div></div>
</script>
<script id="TranslationTemplate" type="text/html">
    <div class="transparentBoxed" data-bind="style:{marginTop: y,marginLeft:x,w:w,h:h}">
        <span class="translatedText">${content}</span>
    </div>
</script>
<script id="ContentTagTemplate" type="text/html">
    <li data-bind="attr: { id:'tag-li-'+ id()}" class="tag" >
        <em><span data-bind="text: numberOfBooks"></span></em> 
        <a href="#" rel="tag"><strong><span data-bind="text: name"></span></strong></a>
    </li>
</script>
